<!DOCTYPE html>
<html>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<head>
		<meta charset="utf-8">
		<title>管理博客</title>
	</head>
	<body>
		<div id="app" style="margin-top: 30px">
			<div class="layui-container">
				<div class="layui-row">
					<div class="layui-col-md12">
						<div>
							<label class="layui-form-label">属性</label>
							<div class="layui-input-inline">
								<select v-on:change="que()"  v-model="condition" class="form-control">
								  <option value=""></option>
								  <option  value="true" >已发布</option>
								  <option  value="false" >未发布</option>
								</select>
							</div>
						</div>
						<div>
							<table class="layui-table">
								<colgroup>
									<col width="330">
									<col width="180">
									<col width="150">
									<col width="150">
								</colgroup>
								<thead>
								<tr>
									<th>标题</th>
									<th>描述</th>
									<th>标记</th>
									<th>是否发布</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
									<tr v-for="item in items">
										<td>{{item.title}}</td>
										<td>{{item.describe}}</td>
										<td>{{item.typeName}}</td>
										<td>{{item.publish==true ? "已发布" : "未发布"}}</td>
										<td>
											<button @click="upd(item.id)" type="button" class="layui-btn layui-btn-radius">
												<i class="layui-icon">&#xe60b;</i>修改
											</button>
											<button @click="rel(item.id)" v-if="item.publish === false" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
												<i class="layui-icon">&#xe609;</i>发布
											</button>
											<button @click="shelf(item.id)" v-else type="button" class="layui-btn layui-btn-radius layui-btn-normal">
												<i class="layui-icon">&#xe64d;</i>下架
											</button>
											<button @click="del(item.id)" type="button" class="layui-btn layui-btn-radius layui-btn-danger">
												<i class="layui-icon">&#xe640;</i>删除
											</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div id="test1" style="margin-left: 450px;"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="layui/layui.all.js" type="module"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				condition:"",
				pageNum:1,
				total:"",
				items:[],
			},
			created() {
				this.show()
			},
			methods:{
				show(){
					axios.post('http://localhost:8080/blog/select', {
						condition:"",
						pageNum:1,
					})
					.then(function (response) {
						app.items = response.data.information
						// app.total = response.data.information[0].total
						app.total = response.data.information[0].total
						app.$nextTick(function () {
							app.paging();
						}) 
					})
					.catch(function (error) {
						console.log(error);
					}); 
				},
				paging(){
					layui.use('laypage', function(){
						var laypage = layui.laypage;
					
						//执行一个laypage实例
						laypage.render({
						  elem: 'test1'
						  ,count: app.total//数据总数，从服务端得到
						  ,limit:10
						  ,jump: function(obj, first){
						    //obj包含了当前分页的所有参数，比如：
						    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
						    // console.log(obj.limit); //得到每页显示的条数
						    app.pageNum = obj.curr
						    //首次不执行
						    if(!first){
						      //do something
							  app.pag();
						    }
						  }
						});
					});
				},
				pag(){
					axios.post('http://localhost:8080/blog/select', {
						condition:app.condition,
						pageNum:app.pageNum,
					})
					.then(function (response) {
						console.log(response.data.information)
						app.items = response.data.information
						// app.total = response.data.information[0].total
						app.total = response.data.information[0].total
						
					})
					.catch(function (error) {
						console.log(error);
					}); 
				},
				upd(number){
					localStorage.setItem("updid",number);
					location.href="update_admin.html";
				},
				rel(number){
					axios.post('http://localhost:8080/blog/undercarriage', {
						uuid:number,
						publish:"true",
					})
					.then(function (response) {
						app.items = response.data.information
						// app.total = response.data.information[0].total
						app.pag();
					})
					.catch(function (error) {
						console.log(error);
					}); 
				},
				shelf(number){
					axios.post('http://localhost:8080/blog/undercarriage', {
						uuid:number,
						publish:"false",
					})
					.then(function (response) {
						app.items = response.data.information
						// app.total = response.data.information[0].total
						app.pag();
					})
					.catch(function (error) {
						console.log(error);
					}); 
				},
				del(number){
					axios.post('http://localhost:8080/blog/delete', {
						uuid:number,
					})
					.then(function (response) {
						app.items = response.data.information
						// app.total = response.data.information[0].total
						app.pag();
					})
					.catch(function (error) {
						console.log(error);
					}); 
				},
				que(){
					axios.post('http://localhost:8080/blog/select', {
						condition:app.condition,
						pageNum:app.pageNum,
					})
					.then(function (response) {
						app.items = response.data.information
						// app.total = response.data.information[0].total
						var count = response.data.information[0].total
						if(count == null){
							app.total = 0;
						}else{
							app.total = count;
						}
						
					})
					.catch(function (error) {
						console.log(error);
					}); 
				}
			}
		})
	</script>
</html>
